Improve site meta list accessibility (V3) #249
Conversation
Avoids nested spans so that screen readers read list item content as one
adamwoodnz
added
the
Accessibility
|
Hi @alexstine I've just merged this third iteration, please try it out on the staging site when you can 🙏 |
|
It looks to mostly be working in Google Chrome. In Firefox, it goes Country, pause, :, pause, and then USA. This must be some very specific styling because I've never seen this happen in lists before. 😞 |
My Assistiv Labs environment is NVDA with Firefox 118 and it sounds ok... but I could remove the colon, I added that for screen readers only to make the announcement better. To make it this way I have to wrap it in a span which might be the cause of the pause. Perhaps better overall without? The design is essentially like a table, with labels aligned left and values aligned to the right. This is why flex or grid is the best layout technique. But even with absolute positioning one nested element is required, and I think that's what is breaking up the text for the screen reader. If removing the colon doesn't improve things maybe we need to try using an actual table which might have better content navigation? |
|
@adamwoodnz A table is likely a bit much for this but I think it is the simplest solution if the design calls for it. It will need proper |
|
I've just merged a change to remove the colon. Can't deploy it now but I'll look into a table layout next week if need be, as it's Friday evening for me now 🙂 Thanks for your help. |
|
The change to remove the colon has been deployed @alexstine, please let me know if that improves things for you 🙏 Worth noting there is a lot of discussion happening on #234 about this design, and the new ideas look much simpler and more accessible (to my eye). |
|
@adamwoodnz Yeah, still doesn't work great. I think it's time to tag in the Design Team and reevaluate this. I don't want you to have to go round and round making code changes when it is clear to me at this point the design needs to change. CC: @ndiego If the choice is made to use a list, that's okay. It needs to be a list. Not a list that looks like a table, visually. |
Fixes #235
Uses absolute position based layout, which avoids nested spans, so that screen readers read list item content as one. The
strongtag is still necessary to be able to separate the parts visually.Voiceover behaviour is returned to how it was originally. Each part of the list item requires an arrow navigation.
NVDA behaviour is pretty good; list items are read as one. I think the only nice-to-have would be for the entire for first item to be read when the list is navigated to; the actual behaviour is that the first tag with text content is read only, eg. 'Country:'. Transcript of navigating to list with 'L', and then items with 'I':
There are no visual changes. The label has a fixed max-width, after which text will be ellipsized. The longest field name 'Published' fits comfortably, but a longer translated string could overflow. That's why I've avoided absolute positioning up til now; it's always brittle.
Home (no visual label)
Single
Testing
Use a screen reader to navigate the home and single site pages, checking how the screen reader interprets the meta list.
It should announce the list, then read each list item as 'label: value', and you should be able to navigate to the link within if appropriate (only country and published don't have links).